    // 模拟后台数据
    var data = [{
        'img': 'oppo1.jpg',
        'msg': 'Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机',
        'sold': '30%',
        'currentprice': '2999',
        'orginprice': '3899'
    }, {
        'img': '7.jpg',
        'msg': '小米11 5G 骁龙888 2K AMOLED四曲面柔性屏 1亿像素 55W有线闪充 50W无线闪充 8GB+256GB 白色 游戏',
        'sold': '80%',
        'currentprice': '5999',
        'orginprice': '6899'
    }, {
        'img': '6.jpg',
        'msg': 'Redmi 9A 5000mAh大电量 1300万AI相机 八核处理器 人脸解锁 4GB+64GB 砂石黑 游戏智能',
        'sold': '53%',
        'currentprice': '4999',
        'orginprice': '5899'
    }, {
        'img': '5.jpg',
        'msg': 'Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能',
        'sold': '66%',
        'currentprice': '2459',
        'orginprice': '3099'
    }, {
        'img': '4.jpg',
        'msg': 'realme 真我Q3 Pro狂欢版 120Hz屏幕 6400万三摄 50W智慧闪充 仅174g 天空之城 8GB+128GB 双5G',
        'sold': '78%',
        'currentprice': '6999',
        'orginprice': '8899'
    }, {
        'img': '3.jpg',
        'msg': 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充 12+256GB 星河入梦 全网通',
        'sold': '90%',
        'currentprice': '4999',
        'orginprice': '7899'
    }]
    // 获取视口的宽高
    function viewWidthHeight() {
        return {
            w: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            h: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    // js的入口函数
    window.addEventListener('load', function () {
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true
        });
        wow.init();
        var contentmain = document.querySelector(".content")
        var ulArr = document.querySelector(".ulArr")
        var itemArr = ulArr.querySelectorAll(".item")
        progressBar()
         
        // 已售多少的进度条
        function progressBar() {
            ulArr = document.querySelector(".ulArr");
            itemArr = ulArr.querySelectorAll(".item")
            console.log(itemArr)
            for (let i = 0; i < itemArr.length; i++) {

                var sold = itemArr[i].querySelector(".sold").innerHTML
                var schedule = itemArr[i].querySelector(".schedule")
                schedule.style.width = sold
            }
        }
        // 给图片和立即抢购添加点击事件
        $(".itemlist").on('click','img',function(){
            console.log("2")
        })
        $(".itemlist").on('click','.buybtn',function(){
            location.href ="./details.html"
        })
        // 定义一个滚动条事件
        // 当我们看到最后一张图时，向后端请求数据，视口高度+滚动条滚动距离 >= 最后一张图的高度
        window.addEventListener('scroll', function () {
            var scrollBar = window.pageYOffset || document.documentElement.scrollTop
            var lastdomTop = ulArr.children[ulArr.children.length - 1].offsetTop
            let lengs = scrollBar + viewWidthHeight().h

            if (lengs >= lastdomTop && lengs <= 6000) {
                for (let j = 0; j < data.length; j++) {
                    let newli = document.createElement('li')
                    newli.className = "item"
                    // console.log(newli)
                    let doms = ` <div class="productimg"><img src='./upload/${data[j].img}' alt=""></div>
                             <div class="msg">${data[j].msg}</div>
                             <div class="price"> <strong>￥${data[j].currentprice}</strong> <del>￥${data[j].orginprice}</del></div>
                             <div class="salesvolume">
                                <div><span> 已售<i class="sold">${data[j].sold}</i></span></div>
                                <div class="leng"><i class="schedule wow animated fadeInLeftBig"></i></div>
                                <div class="surplus"><span>剩余<i>29</i>件</span></div>
                             </div>
                             <div class="buybtn">立即抢购</div>`
                    newli.innerHTML = doms
                    ulArr.append(newli)
                    progressBar()
                }
            }
        })

    })